<template>
    <view>
        <scroll-view :style="{ height: height - tanslateBoxHeight + 'rpx' }" scroll-y="true">
            <view class="pb-20" v-if="!isEmpty(historyList)">
                <view class="bg-white mx-16 mb-16 pa-16 radius-8 text-14" v-for="(item, index) in historyList" :key="item.id">
                    <view class="flex justify-between align-center">
                        <view>{{ item.sourceText }}</view>
                        <view>
                            <view class="p-6 py-2" @click="handleCollectTranslate(item.id, index)">
                                <uni-icons type="star" :size="28" :color="item.collectionFlag == 1 ? style.primary : '#999'"></uni-icons>
                            </view>
                        </view>
                    </view>
                    <view class="flex justify-between align-center pt-5 mt-8 translate-box">
                        <view> {{ item.targetText }}</view>
                        <view class="flex justify-end">
                            <view class="flex align-center">
                                <view class="pl-6 py-2" @click="playAudio(item.id, 1)">
                                    <uni-icons type="sound" :size="28" :color="currentPlayType == 1 && currentPlayId == item.id ? style.primary : '#999'"></uni-icons>
                                </view>
                                <view class="pl-6 py-2" @click="copyText(item.targetText)">
                                    <uni-icons fontFamily="CustomFont" :size="23" color="#999">{{ '&#xe8b0' }}</uni-icons>
                                </view>
                                <view class="pl-6 py-2" @click="fullScreen(item.targetText)">
                                    <uni-icons fontFamily="CustomFont" :size="23" color="#999">{{ '&#xe622' }}</uni-icons>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="flex align-center justify-center text-16 gray9" :style="{ height: height - tanslateBoxHeight + 'rpx' }" v-else>
                <text v-if="firstLoadHistoryList">加载中... </text>
                <text v-else>神清气爽~</text>
            </view>
        </scroll-view>
        <view class="tanslate-box" :style="{ height: tanslateBoxHeight + 'rpx' }">
            <view class="pa-16">
                <view class="flex text-bold" style="gap: 16rpx">
                    <view class="tanslate-input" @click="handleShowTranslate(1)">
                        <uni-icons type="search" :size="30" color="#11a9ce"></uni-icons>
                        <text class="pl-8">文字翻译</text>
                    </view>
                    <view class="audio-input" @click="handleShowTranslate(2)">
                        <uni-icons type="mic-filled" :size="30" color="#ff5639"></uni-icons>
                        <text class="pl-8">语音翻译</text>
                    </view>
                </view>
                <view class="flex align-center text-14 py-12 relative px-60" v-if="pageLoad">
                    <view class="w-50p text-center">{{ formatLang(useTranslateLangStore().sourceLang) }}</view>
                    <image
                        src="@/assets/img/switch.png"
                        class="switch-btn"
                        @click="useTranslateLangStore().switchTranslateLang(useTranslateLangStore().sourceLang, useTranslateLangStore().targetLang)"
                    ></image>
                    <view class="w-50p text-center">{{ formatLang(useTranslateLangStore().targetLang) }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { copyText, isEmpty, toast } from '@/assets/js/utils';
import { getTranslateHistoryList, collectTranslate } from '@/api/translate';
import { usePlayAudio } from '@/hooks/usePlayAudio';
import { formatLang } from '@/assets/js/utils/filters';
import { useTranslateLangStore } from '@/stores/translateLang';

import style from '../../../assets/css/variables.module.scss';

const props = defineProps({
    //组件整体高度,单位rpx
    height: {
        type: Number,
        default: 0
    }
});
const pageLoad = ref(false);
onMounted(() => {
    uni.$on('refreshTranslateHistoryList', () => {
        getHistoryList();
    });
    pageLoad.value = true;
    getHistoryList();
});

//底部翻译操作栏高度
const tanslateBoxHeight = ref(300);

//播放音频相关
const { currentPlayId, currentPlayType, playAudio } = usePlayAudio();

//获取历史翻译记录
const historyList: any = ref([]);
//首次加载历史翻译记录
const firstLoadHistoryList = ref(true);
const getHistoryList = async () => {
    let [result, err] = await getTranslateHistoryList({});
    firstLoadHistoryList.value = false;
    if (result) {
        historyList.value = result;
    }
};

//收藏翻译
const handleCollectTranslate = async (id: any, index: any) => {
    uni.showLoading({ mask: true, title: '请求中' });
    let [result, err] = await collectTranslate(id);
    uni.hideLoading();
    if (result) {
        let currentCollectionFlag = historyList.value[index].collectionFlag;
        historyList.value[index].collectionFlag = currentCollectionFlag == 1 ? 0 : 1;
        toast(`${currentCollectionFlag == 1 ? '取消' : '收藏'}成功`);
    }
};

const emit = defineEmits(['showTranslate', 'translateFullScreen']);
const handleShowTranslate = (type: number) => {
    emit('showTranslate', type);
};

//翻译全屏
const fullScreen = (targetText: string) => {
    emit('translateFullScreen', { targetText });
};

//子组件向父组件暴露函数调用
defineExpose({ getHistoryList });
</script>

<style lang="scss" scoped>
.tanslate-box {
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.1));
    background-color: #fff;
    border-radius: 36rpx 36rpx 0 0;
    .tanslate-input {
        width: 100%;
        display: flex;
        align-items: center;
        color: #000;
        font-size: 32rpx;
        background-color: #c9f3ff;
        height: 120rpx;
        padding: 0 32rpx;
        border-radius: 36rpx;
    }
    .audio-input {
        width: 100%;
        display: flex;
        align-items: center;
        color: #000;
        font-size: 32rpx;
        background-color: #ffd9ce;
        height: 120rpx;
        padding: 0 32rpx;
        border-radius: 36rpx;
    }
}
.translate-box {
    border-top: 1rpx dashed #ddd;
}
.switch-btn {
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    left: calc(50% - 24rpx);
}
.w-50p {
    width: 50%;
}
</style>
